<template>
  <div class="LoginBox">
    <div class="Login">
      <div class="close" @click="closePrompt">
        <img src="./icons/close.png" alt="" width="15px" height="15px" />
      </div>
      <div class="LoginTitle" v-show="isLogin">用户登录</div>
      <div class="LoginTitle" v-show="isResign">用户注册</div>
      <div class="loginInputBox" v-show="isLogin">
        <span :class="ErrorTips">{{ falseMsg }}</span>
        <div class="LoginInput">
          <div class="username">
            <span>账号</span
            ><input type="text" placeholder="请输入账号" v-model="username" />
          </div>
          <hr />
          <div class="passwd">
            <span>密码</span
            ><input
              type="password"
              placeholder="请输入密码"
              v-model="password"
            />
          </div>
        </div>
      </div>
      <div class="registerInputBox" v-show="isResign">
        <span :class="ErrorTips">{{ falseMsg }}</span>
        <div class="LoginInput">
          <div class="email">
            <span class="emailTitle">邮箱</span
            ><input
              :class="EmailInput"
              type="text"
              placeholder="请输入邮箱"
              v-model="email"
              @input="checkEmail"
            /><span class="emailSpan">|</span
            ><button
              :class="EmailCode"
              @click="getCode"
              :disabled="getCodeDisabled"
            >
              {{ countdown > 0 ? `${countdown}秒后重新获取` : "获取验证码" }}
            </button>
          </div>
          <hr />
          <div class="passwd">
            <span>验证码</span
            ><input
              type="text"
              placeholder="请输入验证码"
              v-model="enterCode"
            />
          </div>
        </div>
      </div>
      <div class="LoginBtn" v-show="isLogin">
        <button class="register" @click="toRegister">注册</button>
        <button :class="loginBtn1" :disabled="IsButtonDisabled" @click="Login">
          登录
        </button>
      </div>
      <div class="LoginBtn" v-show="isResign">
        <button class="register" @click="backLogin">返回登录</button>
        <button
          :class="loginBtn2"
          :disabled="IsRegisterButtonDisable"
          @click="Register"
        >
          注册
        </button>
      </div>
      <div class="note">
        <span>登录或完成注册代表你同意</span><a href="#">用户协议</a
        ><span>或</span><a href="#">隐私政策</a>
      </div>
    </div>
    <img
      class="nina"
      src="./icons/nina.jpg"
      alt=""
      width="160px"
      height="120px"
    />
    <img
      class="subaru"
      src="./icons/subaru.png"
      alt=""
      width="160px"
      height="120px"
    />
  </div>
</template>

<script>
import instance from "@/utils/request";
export default {
  props: {
    isLogin: {
      type: Boolean,
      required: true,
    },
    isResign: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      username: "",
      password: "",
      email: "",
      countdown: 0,
      enterCode: "",
      EmailCode: "emailCode",
      EmailInput: "emailInput",
      getCodeDisabled: true,
      IsButtonDisabled: false,
      IsRegisterButtonDisable: false,
      falseMsg: "登录失败",
      ErrorTips: "notError",
    };
  },
  methods: {
    Login() {
      const data = { username: this.username, password: this.password };
      instance.post("login", data).then((response) => {
        if (response.data.code === 1) {
          console.log("2");
          localStorage.setItem("token", response.data.data);
          this.closePrompt();
          window.location.reload();
        }
        if (response.data.code === 0) {
          console.log("3");
          this.ErrorTips = "errorTips";
          this.falseMsg = response.data.msg;
        }
      });
    },
    closePrompt() {
      if (this.ifNotLogin) {
        this.$store.dispatch("updateNotLogin", false);
      }
    },
    backLogin() {
      this.$emit("backLogin");
    },
    toRegister() {
      this.$emit("toRegister");
    },
    checkEmail() {
      if (this.email.trim().includes(".com")) {
        this.EmailCode = "emailCodeActive";
        this.getCodeDisabled = false;
      } else {
        this.EmailCode = "emailCode";
        this.getCodeDisabled = true;
      }
    },
    getCode() {
      instance.get("getCaptcha", {
        params: {
          email: this.email,
        },
      });
      if (this.countdown > 0) return; // 如果正在倒计时，不重复启动

      this.getCodeDisabled = true;
      this.EmailCode = "emailSendCode";
      (this.EmailInput = "emailSendInput"), (this.countdown = 60);

      const timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(timer);
          this.getCodeDisabled = false;
          this.EmailCode = "emailCodeActive";
          this.EmailInput = "emailInput";
        }
      }, 1000);
    },
    Register() {
      instance
        .get("register", {
          params: {
            email: this.email,
            captcha: this.enterCode,
          },
        })
        .then((response) => {
          if (response.data.code === 1) {
            localStorage.setItem("token", response.data.data);
            this.closePrompt();
            window.location.reload();
          }
          if (response.data.code === 0) {
            this.ErrorTips = "errorTips";
            this.falseMsg = response.data.msg;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  computed: {
    isButtonDisabled() {
      if (!this.username.trim() || !this.password.trim()) {
        return true;
      } else {
        return false;
      }
    },
    isRegisterButtonDisable() {
      if (!this.email.trim() || !this.enterCode.trim()) {
        return true;
      } else {
        return false;
      }
    },
    loginBtn1() {
      return this.isButtonDisabled ? "loginNotActive" : "loginActive";
    },
    loginBtn2() {
      return this.isRegisterButtonDisable ? "loginNotActive" : "loginActive";
    },
    ifNotLogin() {
      return this.$store.getters.getNotLogin;
    },
  },
};
</script>

<style>
.LoginBox {
  width: 90vw;
  max-width: 600px;
  height: 90vh;
  max-height: 300px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 20;
}

.nina {
  position: absolute;
  bottom: 0%;
  left: -40px;
}

.subaru {
  position: absolute;
  bottom: 0%;
  right: -40px;
}

.LoginTitle {
  font-size: 20px;
  margin-top: 20px;
  font-weight: 300;
  text-align: center;
}
.errorTips {
  color: #c30000;
  font-size: 12px;
  margin-left: 10px;
}
.notError {
  visibility: hidden;
}

.loginInputBox {
  width: 60%;
  margin: 20px auto;
  margin-top: -1px;
}
.registerInputBox {
  width: 60%;
  margin: 20px auto;
  margin-top: -1px;
}

.LoginInput {
  width: 100%;
  border: 1px solid #e3e5e7;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
}

.username {
  height: 30%;
}

.username span {
  display: inline-block;
  width: 20%;
  text-align: center;
  font-size: 15px;
}

.email {
  height: 30%;
}

.email .emailTitle {
  display: inline-block;
  width: 20%;
  font-size: 15px;
  text-align: center;
}

.email .emailInput {
  width: 45%;
  border: none;
  border-radius: 10px;
  padding: 6px;
  outline: none;
}

.email .emailSendInput {
  width: 43%;
  border: none;
  border-radius: 10px;
  padding: 6px;
  outline: none;
}

.email .emailSpan {
  display: inline-block;
  width: 1%;
  color: #e1e3e5;
}

.email .emailCode {
  display: inline-block;
  width: 28%;
  min-width: 28%;
  text-align: center;
  color: #e1e3e5;
  background-color: #fff;
  border: none;
  cursor: no-drop;
  outline: none;
}

.email .emailSendCode {
  display: inline-block;
  width: 32%;
  min-width: 32%;
  text-align: center;
  color: #e1e3e5;
  background-color: #fff;
  border: none;
  cursor: no-drop;
  outline: none;
}

.email .emailCodeActive {
  display: inline-block;
  width: 28%;
  min-width: 28%;
  text-align: center;
  color: #2cb1dd;
  background-color: #fff;
  border: none;
  cursor: pointer;
  outline: none;
}

.LoginInput hr {
  border: none;
  background-color: #e3e5e7;
  height: 1px;
  width: 100%;
}

.passwd {
  height: 30%;
}

.passwd span {
  display: inline-block;
  width: 20%;
  text-align: center;
  font-size: 15px;
}

.LoginInput input {
  width: 30%;
  max-width: 70%;
  border: none;
  border-radius: 10px;
  padding: 6px;
  outline: none;
}

.register {
  width: 130px;
  height: 35px;
  border: 1px solid #e3e5e7;
  border-radius: 10px;
  text-align: center;
  background-color: #fff;
  outline: none;
  cursor: pointer;
}

.LoginBtn {
  display: flex;
  width: 60%;
  height: 55%;
  margin: 5px auto;
  justify-content: space-between;
  align-items: center;
}

.loginNotActive {
  width: 130px;
  height: 35px;
  border: none;
  border-radius: 10px;
  text-align: center;
  background-color: #7fd6f5;
  color: #d8f2fc;
  outline: none;
  cursor: no-drop;
}

.loginActive {
  width: 130px;
  height: 35px;
  border: none;
  border-radius: 10px;
  text-align: center;
  background-color: #7fd6f5;
  color: #fff;
  outline: none;
  cursor: pointer;
}

.loginActive:hover {
  width: 130px;
  height: 35px;
  border: none;
  border-radius: 10px;
  text-align: center;
  background-color: #26baef;
  color: #fff;
  outline: none;
  cursor: pointer;
}

.close {
  position: absolute;
  top: 15px;
  right: 15px;
  cursor: pointer;
}

.note {
  margin: 20px auto;
  text-align: center;
  font-size: 12px;
  letter-spacing: 1px;
}

.note a {
  color: #26baef;
  text-decoration: none;
  padding: 0 3px;
}
</style>